<template>
	<view class="order-detail" :style="css.page + 'min-height:' + $xyfun.xysys().windowHeight + 'px'" v-if="!isEmpty">
		<view class="m-t-30 br-10 m-lr-30 m-b-30 p-30 bc-w">
			<view class="flex">
				<text>订单状态：</text>
				<view :class="'name tb ts-34 ' + getOrderStatusClass(order.deposit_status)">
					<text v-if="order.deposit_status === 0">未支付定金</text>
					<text v-else-if="order.deposit_status === 1">已支付定金</text>
					<text v-else-if="order.deposit_status === 3">已取消</text>
				</view>
			</view>

			<view class="flex m-t-20">
				<text>过期时间：</text>
				<text :class="timeClass">{{ timeText }}</text> <!-- 显示倒计时信息 -->
			</view>

		</view>

		<!-- 订单基本信息 -->
		<view class="m-t-30 br-10 m-lr-30 m-b-30 p-30 bc-w">
			<view class="flex">
				<text>订单编号：</text>
				<text>{{ order.order_number }}</text>
				<text @tap="$xyfun.copy(order.order_number)" class="ts-24 bl br-10 m-l-25 p-lr-10"
					:style="css.pbg">复制</text>
			</view>
			<view class="flex m-t-20">
				<text>下单时间：</text>
				<text>{{ order.created_at }}</text>
			</view>
			<view class="flex m-t-20">
				<text>订金金额：</text>
				<view class="m-l-auto tb"><text>¥</text>2000元</view>
			</view>
			<view class="flex m-t-20">
				<text>剩余金额：</text>
				<view class="m-l-auto tb"><text>¥</text>{{ order.total_price - 2000 }}元</view>
			</view>
			<view class="flex m-t-20">
				<view class="m-l-auto tb lh-34">
					<text>实付总金额：</text>
					<text :style="css.tcp">¥</text>
					<text class="ts-34" :style="css.tcp">{{ order.total_price }}元</text>
				</view>
			</view>
		</view>
		<!-- 套餐详情 -->
		<view class="package-detail m-t-30 br-10 m-lr-30 m-b-30 p-30 bc-w">
			<view class="flex">
				<text>加盟套餐名称：</text>
				<text>{{ package.package_name }}</text>
			</view>
			<view class="flex m-t-20">
				<text>原始价格：</text>
				<view class="m-l-auto tb"><text>¥</text>{{ package.original_price }}元</view>
			</view>
			<view class="flex m-t-20">
				<text>套餐价格：</text>
				<view class="m-l-auto tb"><text>¥</text>{{ package.package_price }}元</view>
			</view>
			<view class="flex m-t-20">
				<text>设备：</text>
				<text>{{ package.devices }}</text>
			</view>
			<view class="flex m-t-20">
				<text>赛道：</text>
				<text>{{ package.track }}</text>
			</view>
			<view class="flex m-t-20">
				<text>系统：</text>
				<text>{{ package.system }}</text>
			</view>
		</view>
		<!-- 订单商品详情 -->
		<view v-if="type === 'order'&& order.order_items && order.order_items.length > 0"
			class="flex p-lr-30 m-30 br-10 bc-w">
			<!-- 只有当有商品时才显示商品详情 -->
			<view class="flex m-t-20">
				加盟选购商品详情
			</view>

			<view class="item-list flex">
				<view v-for="(g, index) in order.order_items" :key="index" :style="css.blpc"
					:class="'item p-tb-30 flex ' + (index === order.order_items.length - 1 ? '' : 'bl-b')">

					<!-- 商品图片移到最左边 -->
					<view class="l ovh br-10">
						<image :src="g.image" mode="widthFix" />
					</view>

					<!-- 右边显示商品信息 -->
					<view class="r psr m-l-20">
						<view class="venue">
							商品名称：{{ g.name }}
						</view>
						<view class="venue m-t-10">
							商品价格：{{ g.price }}元
						</view>
						<view class="venue m-t-10">
							商品数量：{{ g.num }}
						</view>
						<view class="venue m-t-10">
							商品类型：{{ g.category_name }}
						</view>
						<view class="venue">
							总价：{{ (g.num * g.price).toFixed(2) }}元
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付金额信息 -->
		<view class="m-t-30 br-10 m-lr-30 m-b-30 p-30 bc-w">

		</view>

		<!-- 操作按钮 -->
		<view class="bottom-fixed flex tc bc-w" v-if="order.deposit_status === 0">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<view class="action flex m-l-auto">
					<view class="close m-r-40" :style="css.pbg + css.tcl" @tap="closeOrder()">取消订单</view>
					<view class="pay m-l-auto tc-w" :style="css.mcbg" @tap="onPay()">支付</view>
				</view>
			</view>
		</view>

		<!-- 支付弹窗 -->
		<block v-if="payModelShow">
			<view class="xy-modal-box xy-modal-box-center pay-model-box p-t-30 br-10 bc-w"
				:class="[payModelShow ? 'xy-modal-show' : '']">
				<view class="title m-b-50 ts-32 tc bl-b p-b-30" :style="css.blpc">支付方式</view>
				<view class="tc tb m-tb-40 ts-36">支付金额{{ order.total_price || "0.00" }}元</view>
				<view class="pay-list">
					<view class="item flex p-30 m-b-2 lh-40 bc-w" v-for="(item, index) in payList" :key="index"
						v-if="item.state">
						<view class="l flex">
							<text :class="'xyicon ' + item.iconCls"></text>
							<view class="m-l-20">{{ item.title }}</view>
						</view>
						<view class="r tc-w">选择</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'order', // 定义 type 属性并赋一个默认值
				orderId: '', // 当前订单ID
				order: {}, // 订单详情
				isEmpty: true, // 订单是否为空
				time: '', // 倒计时
				payModelShow: false, // 是否显示支付弹窗
				payList: [], // 支付方式列表
				package: { // 添加套餐数据

				},
				timeText: '', // 倒计时文本
			};
		},
		onLoad() {
			const options = this.$Route.query;
			if (options) {
				this.orderId = options.id; // 获取订单ID
			}
			this.loadData();
		},
		onUnload() {
			if (this.countdownInterval) {
				clearInterval(this.countdownInterval); // 清理倒计时定时器
			}
		},
		methods: {
			async closeOrder() {
				if (!this.orderId) return;

				// 调用取消订单的接口
				const url = '/join_orders/cancelOrder';
				this.$api.post({
					url: url,
					loadingTip: '取消订单中...',
					data: {
						order_number: this.orderId, // 传递订单号
					},
					success: res => {
						if (res === 1) {
							// 取消订单成功后，进行一些UI更新或状态改变
							this.$xyfun.msg('订单已取消'); // 弹出提示
							this.order.deposit_status = 3 // 更新订单状态为已取消
							// this.isEmpty = true;  // 可以将订单显示状态设置为“订单已取消”
						}
					},
					fail: err => {
						this.$xyfun.msg('取消订单失败');
					}
				});
			},
			async loadData() {
				if (!this.orderId) return;

				const url = '/join_orders/getOrderDetail';
				this.$api.post({
					url: url,
					loadingTip: '加载中...',
					data: {
						order_id: this.orderId,
					},
					success: res => {
						if (res) {
							this.order = res; // 假设 API 返回的数据结构为 res.data
							this.package = res.package;
							console.log(this.order);
							this.isEmpty = false;

							// 计算倒计时
							this.startCountdown();
						}
					},
					fail: err => {
						this.$xyfun.msg('加载订单详情失败');
					}
				});
			},
			onPay() {
				//发起支付
				this.$api.post({
					url: '/Shande/payJoinUs',
					data: {
						orderjson: this.order
					},
					success: res => {
						const jsonData = JSON.parse(res.data);
						const payDataString = jsonData
							.pay_data; // 获取 pay_data 的 JSON 字符串
						const payData = JSON.parse(payDataString); // 解析成对象
						uni.requestPayment({
							appId: payData.appId,
							nonceStr: payData.nonceStr,
							package: payData.package,
							paySign: payData.paySign,
							signType: payData.signType,
							timeStamp: payData.timeStamp,
							success: (e) => {
								uni.showModal({
									content: "支付成功",
									showCancel: false,
									success: (res) => {
										console.log("res.confirm:" + res.confirm);
										if (res.confirm) {
											uni.switchTab({
												url: '/pages/user/' // 这里使用 switchTab 进行跳转
											});
										}
									}
								});
							},
							fail: (e) => {
								uni.showModal({
									content: "支付取消",
									showCancel: false
								})
							}
						})
					},
					fail: res => {
						console.log(res);
						this.disabled = false;
					}
				});
				// 支付处理逻辑...
				// this.payModelShow = true;
			},
			// closeOrder() {
			// 	// 取消订单处理逻辑...
			// 	this.$xyfun.msg('订单已取消');
			// },
			refund(orderId) {
				// 退订处理逻辑...
			},
			getOrderStatusClass(status) {
				if (status === 0) {
					return 'text-red'; // 未支付定金
				} else if (status === 1) {
					return 'text-green'; // 已支付定金
				} else if (status === 3) {
					return 'text-gray'; // 已取消
				}
				return ''; // 默认情况
			},
			startCountdown() {
				const createdAt = new Date(this.order.created_at); // 订单创建时间
				const expirationTime = createdAt.getTime() + 5 * 60 * 1000; // 创建时间加5分钟
				const currentTime = Date.now(); // 当前时间

				// 如果订单已经过期，直接设置状态并返回
				if (currentTime >= expirationTime) {
					this.timeText = "已过期";
					this.timeClass = 'time expired'; // 设置已过期样式
					return; // 不调用取消订单方法
				}

				// 否则启动倒计时
				const remainingTime = expirationTime - currentTime; // 剩余时间

				this.timeText = `订单还有 ${this.formatTime(remainingTime)} 后过期，请尽快支付`; // 设置倒计时文本
				this.countdownInterval = setInterval(() => {
					const currentTime = Date.now();
					const remainingTime = expirationTime - currentTime;

					if (remainingTime <= 0) {
						clearInterval(this.countdownInterval);
						this.timeText = "已过期";
						this.timeClass = 'time expired'; // 设置已过期样式
						this.closeOrder(); // 超过5分钟自动取消订单
					} else {
						this.timeText = `订单还有 ${this.formatTime(remainingTime)} 后过期，请尽快支付`; // 更新倒计时文本
					}
				}, 1000); // 每秒更新一次倒计时
			},


			// 格式化倒计时时间为 "mm:ss"
			formatTime(time) {
				const minutes = Math.floor(time / 60000);
				const seconds = Math.floor((time % 60000) / 1000);
				return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
			}

		}
	};
</script>

<style scoped>
	/* 样式部分 */
	.order-detail {
		background-color: #f5f5f5;
	}

	.top {
		background-color: #55aa00;
		height: 250px;
	}

	/* 确保项的容器使用flex布局 */
	.item-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* 保证图片和内容在竖直方向对齐 */
		margin-bottom: 10px;
		/* 增加底部的间距 */
	}

	/* 商品图片放在最左侧，宽度固定 */
	.l {
		width: 160px;
		/* 设置图片固定宽度，避免自适应导致布局错乱 */
		height: auto;
		flex-shrink: 0;
		/* 不允许图片缩小 */
	}

	/* 右侧商品信息区域 */
	.r {
		flex: 1;
		/* 右侧区域占满剩余空间 */
		margin-left: 20px;
		/* 距离左边留白 */
		display: flex;
		flex-direction: column;
		/* 确保信息竖直排列 */
	}

	/* 调整商品信息的布局 */
	.goods-title,
	.venue,
	.date,
	.price-box {
		margin-bottom: 5px;
		/* 每个信息项之间留点间距 */
	}

	/* 调整价格显示的字体 */
	.ts-32 {
		font-size: 10px;
		font-weight: bold;
	}


	.item {
		padding-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
	}

	.time {
		font-size: 26px;
		color: #ff6a00;
		font-weight: 600;
	}

	.time.expired {
		color: #ff0000;
		/* 红色表示已过期 */
		font-size: 28px;
		font-weight: bold;
	}

	.timeClass {
		color: red;
		/* 设置倒计时字体为红色 */
	}

	.pay-model-box {
		max-width: 600px;
		margin: 0 auto;
	}

	.close,
	.pay {
		background-color: #ff7f00;
		color: #fff;
		padding: 15px;
		border-radius: 10px;
	}
</style>